<template>
  <div>
    <!-- 标题 -->
    <row-vet></row-vet>
    <!-- 购物车列表 -->
    <div class="head">
      <van-icon name="shop-o" size="20" />购物车列表
    </div>
    <div class="goodslist">
      <!-- 商品列表 -->
      <van-row v-for="(item) in orderGoodsList" :key="item.good_id">
        <!-- <van-swipe-cell> -->
        <van-col span="2">
          <!-- 复选框 -->
          <van-checkbox
            class="checkbox"
            v-model="item.checked"
            checked-color="#D81E06"
            @change="checkGood(item.goods_id)"
          ></van-checkbox>
        </van-col>
        <!-- 商品详情 -->
        <van-col class="GoodsDetails" span="20">
          <van-card
            :price="item.goods_price"
            :desc="item.goods_name"
            :thumb="item.goods_small_logo"
          ></van-card>
          <!-- 商品加减按钮 -->
          <van-stepper
            ref="stepRef"
            v-model="item.goods_number"
            min="1"
            async-change
            @change="val=>changeGoodNum(val,item)"
          />
        </van-col>
        <!-- 滑动删除 -->
        <!-- <template slot="right">
            <van-button square type="danger" text="删除" />
          </template>
        </van-swipe-cell>-->
      </van-row>
      <row-vit></row-vit>
    </div>
    <!-- 提交订单 -->
    <van-submit-bar
      :price="countPrice"
      button-text="提交订单"
      safe-area-inset-bottom
      @submit="onsubmit"
    >
      <!-- 全选按钮 -->
      <van-checkbox
        label-position="right"
        v-model="ischeckAll"
        checked-color="#D81E06"
        @click="checkAll"
      >全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import minfo from '../util/navigation'
import header from '../util/header'
export default {
  data() {
    return {
      orderGoodsList: [],
      value: 1,
      selectedData: [],
      // 控制全选
      ischeckAll: false,
      // 商品的选择
      checked: false,
      // 存储被选中商品的id值
      checkGoodIds: [],
      // 总价
      countPrice: 0
    }
  },
  components: {
    'row-vit': minfo,
    'row-vet': header
  },
  created() {
    this.orderGoodsList = JSON.parse(window.localStorage.getItem('goshop'))
    console.log(this.orderGoodsList)
    // this.orderGoodsList.push(JSON.parse(ms))
    // this.orderGoodsList = [...new Set(this.orderGoodsList)]
    // window.localStorage.setItem('firstGoos', JSON.stringify(ms))
    // console.log(this.orderGoodsList)
    // this.getorder()
  },
  methods: {
    getorder() {
      // let data = this.localStorage.getItem('orderGoods')
      //   let data = await this.$axios.get('/goods/search')
      //   console.log(data.message.goods)
      // },
      // stepper失焦事件
      // onblur(id) {
      //   // this.$store.commit('changeGoodNum', {id, num})
      //   console.log(this.$refs.stepRef)
    },
    // stepper点击加减，数量改变事件
    changeGoodNum(val, item) {
      this.orderGoodsList.forEach(item => {
        if (item.goods_id === id) {
          item.goods_number = num
        }
      })
      this.countTotal(item)
    },
    // 计算总价
    countTotal(item) {
      let total = 0
      this.orderGoodsList.forEach(item => {
        if (item.checked === true) {
          // 计算商品的选择数量价格
          total += item.goods_price * item.goods_number * 100
        }
      })
      this.countPrice = total
    },
    // 商品前的选择
    checkGood(id) {
      this.checkGoodIds = []
      this.orderGoodsList.forEach(item => {
        // 若商品的checked属性为true，就把此商品的id加进checkGoodIds存id的数组
        if (item.checked === true) {
          this.checkGoodIds.push(item.goods_id)
        }
        // 判断是否全选，若存储商品id的数组的长度<数据数组的长度，就不全选；否则全选
        if (this.checkGoodIds.length < this.orderGoodsList.length) {
          this.ischeckAll = false
        } else {
          this.ischeckAll = true
        }
      })
    },
    // 全选  ischeckAll跟上面checkGood事件的ischeckAll是联动的
    checkAll() {
      let list = this.orderGoodsList
      if (this.ischeckAll) {
        // true 然后进上面checkGood，改ischeckAll为true
        console.log(this.ischeckAll)
        list.forEach(item => {
          item.checked = false
        })
        this.selectedData = []
      } else {
        // false 第一次点进这个判断，然后进上面checkGood，改ischeckAll为false
        console.log(this.ischeckAll)
        list.forEach(item => {
          item.checked = true
          if (this.selectedData.indexOf(item.goods_id) < 0) {
            this.selectedData.push(item.goods_id)
          }
        })
      }
    },
    // 提交订单时把数据存储本地，并跳转页面
    onsubmit() {
      //新建一个数组 存储勾选中的商品
      let newgoods = []
      this.orderGoodsList.forEach(item => {
        if (item.checked) {
          newgoods.push(item)
        } else {
          return
        }
      })
      console.log(newgoods)
      //向localstorage传入新数组
      window.localStorage.setItem('newgood', JSON.stringify(newgoods))
      //跳转界面进入oreder
      this.$router.push('/order')
    }
  },
  computed: {
    // ...mapState(['orderGoodsList']),
    ...mapGetters([, 'addChecked'])
  }
}
</script>
<style lang="less" scoped>
.head {
  margin: 0.4rem;
  font-size: 15px;
  .van-icon {
    vertical-align: text-bottom;
    margin-right: 3px;
  }
}
.goodslist {
  padding-bottom: 100px;
  .van-row {
    width: 100%;
    background-color: #fafafa;
    .GoodsDetails {
      position: relative;
      .van-stepper {
        position: absolute;
        transform: translate(6.2rem, -0.93333rem);
      }
    }
  }
}

.checkbox {
  margin-top: 1.2rem;
  margin-left: 0.26667rem;
}
.shopCarCheck {
  padding-top: 15px;
}
.van-submit-bar {
  bottom: 50px;
}
</style>